<template>
  <div class="tuya" v-show='t_show'>
      <div class="header">
          <div class="left">
              <div class="line box" @click="getDrawType('line')">
                  <div class="line-l"></div>
              </div>
              <div class="rect box" @click="getDrawType('rect')">
                  <div class="rect-r"></div>
              </div>
              <div class="art box" @click="getDrawType('art')">
                  <div class="art-a"></div>
              </div>
              <div class="font box" @click="getDrawType('text')">
                  <div class="font-a">A</div>
               </div>
               <div class="font-size">
                   <el-input-number v-model="fontsize" :min="12" :max="50" controls-position="right" size="small" @change="getFontsize"/>
               </div>
               <div class="color box">
                   <el-color-picker v-model="color" size="small" />
               </div>
          </div>
          <div class="right">
              <el-button  type='primary' size="small" @click="getDrawType('clear')">橡皮檫</el-button>
              <el-button  type='primary' size="small" @click="clear">清除</el-button>
              <el-button  type='primary' size="small" @click="download">导出</el-button>
              <el-button  type='primary' size="small" @click="exit">退出</el-button>
          </div>
      </div>
      <canvas id="canvas" ref='can'></canvas>
      <textarea type="text" class="a-text" v-show='draw_a' ref='input_t' @keypress.enter="hidden"></textarea>
      <div class="xpc" v-show='xpc_show' ref="xpc_ref"></div>
  </div>
</template>

<script>
import { onMounted, reactive ,ref,toRefs} from 'vue'
export default {
   props:{
      t_show:{
          type:Boolean,
          default:true
      } 
   },
   setup(props,context){
       let fontsize=ref(14)
       let color=ref('#fff')
       let lineWidth=ref(2)
       let can=''
       let ctx=''
       let drawType=ref('line')
       let getFontsize =(value)=>{
           fontsize.value=value
       }
       let draw_a=ref(false)
       let input_t=ref(null)
       let xpc_show=ref(false)
       let xpc_ref=ref(null)

      function getCanvas(){
           can=document.querySelector('#canvas')
           let width=window.innerWidth
           let height=window.innerHeight
           can.width=width
           can.height=height-60
           ctx=can.getContext('2d')

           can.onmousedown=(e)=>{
              ctx.save()
              ctx.strokeStyle=color.value
              
              ctx.lineWidth=lineWidth.value
              ctx.beginPath()
              switch(drawType.value){
                  case 'line':
                      drawLine(e);break;
                  case 'rect':
                      drawRect(e);break;
                  case 'art':
                      drawArt(e);break;
                  case 'text':
                      drawText(e);break;
                  case 'clear':
                      clearSome(e);break;
                  default:
                      break;
              }
           }
           can.onmouseup=()=>{
               removeEvent()
           }
           can.onmouseleave=()=>{
               removeEvent()
           }
       }
       function removeEvent(){
           can.onmousemove=null
           xpc_show.value=false
           ctx.closePath()
           ctx.restore()
       }
       function drawLine(e){
          let {offsetX,offsetY}=e
          ctx.moveTo(offsetX,offsetY)
          can.onmousemove=(es)=>{
             let {offsetX,offsetY}=es
             ctx.lineTo(offsetX,offsetY)
             ctx.stroke()
          }
       }
       function drawRect(e){
          let {offsetX,offsetY}=e

          can.onmousemove=(es)=>{
            let x=es.offsetX
            let y=es.offsetY
            ctx.clearRect(offsetX,offsetY,x-offsetX,y-offsetY)
            ctx.strokeRect(offsetX,offsetY,x-offsetX,y-offsetY)
          }
       }
       function drawArt(e){
          let {offsetX,offsetY}=e

          can.onmousemove=(es)=>{
              ctx.beginPath()
              ctx.strokeStyle=color.value
              ctx.lineWidth=lineWidth.value
              let x=es.offsetX
              let y=es.offsetY
              let r=Math.sqrt((x-offsetX)**2+(y-offsetY)**2)
              ctx.clearRect(offsetX-r,offsetY-r,r*2,r*2)
              ctx.arc(offsetX,offsetY,r,0,360)
              ctx.stroke()
              ctx.restore()
          }
       }
       function drawText(e){
          
          let {clientX,clientY,offsetX,offsetY}=e
           input_t.value.style.top=clientY+'px'
           input_t.value.style.left=clientX+'px'
           draw_a.value=true
           
           let t=setTimeout(()=>{
              clearTimeout(t)
              input_t.value.focus()
           })
           
           input_t.value.onblur=()=>{
               ctx.beginPath()
                ctx.font=`${fontsize.value}px sans-serif`
                ctx.fillStyle=color.value
               let textValue=input_t.value.value
               draw_a.value=false
               ctx.fillText(textValue,offsetX,offsetY)
               ctx.closePath()
               input_t.value.value=''
           }
       }
       function clearSome(e){
           let {clientX,clientY}=e
           xpc_ref.value.style.top=clientY-40+'px'
           xpc_ref.value.style.left=clientX-40+'px'
           xpc_show.value=true
           can.onmousemove=(es)=>{
              let {clientX,clientY,offsetX,offsetY}=es
              xpc_ref.value.style.top=clientY-40+'px'
              xpc_ref.value.style.left=clientX-40+'px'
              ctx.clearRect(offsetX-40,offsetY-40,80,80)
           }
       }
       let getDrawType=(value)=>{
           drawType.value=value
       }
       let clear=()=>{
           ctx.clearRect(0,0,can.width,can.height)
       }
       let download=()=>{
           let url=can.toDataURL()
           let image=new Image()
           image.src=url
           image.style.width=window.innerWidth*0.85+'px'
           image.style.height=window.innerHeight*0.8+'px'
           image.className='down-img'
           let a=document.createElement('a')
           let name=new Date().getTime()
           a.download=name+'.png'
           a.href=url
            a.style.display='none'
            document.body.appendChild(a)
           image.onload=()=>{
               document.body.appendChild(image)
               let t=setTimeout(()=>{
                   clearTimeout(t)
                   image.remove()
                   a.click()
                   a.remove()

               },1500)
           }
       }
       let exit=()=>{
         context.emit('update:t_show',false)
       }
       let hidden=()=>{
           input_t.value.blur()
        //    draw_a.value=false
       }
       let quikePress=e=>{
           if(e.shiftKey){  
               switch(e.key.toLocaleLowerCase()){
                   case 'd':
                     download() ;break;
                   case 'l':
                     drawType.value='line'; break;
                   case 'r':
                     drawType.value='rect'; break;
                   case 'a':
                     drawType.value='art'; break;
                   case 't':
                     drawType.value='text'; break;
                   case 'b':
                     drawType.value='clear'; break;
                   case 'c':
                     clear(); break;
                   case 'e':
                     exit(); break;
                   default:
                       break;
               }
           }

       }
       onMounted(()=>{
           getCanvas()
           window.addEventListener('keypress',quikePress)
       })
       return {
         fontsize,color,draw_a,input_t,xpc_show,xpc_ref,
         exit,getFontsize,getDrawType,clear,download,hidden
       }
   }
}
</script>

<style lang='less' scoped>
.tuya{
    position:fixed;
    top:0;
    left: 0;
    z-index: 999;
    background-color: #333;
    width: 100vw;
    height: 100vh;
    opacity: 0.8;
    .header{
        width: 100vw;
        height: 60px;
        line-height: 60px;
        display: flex;
        background-color: #09F5ED;
        border-bottom: 1px solid rgb(15,149,176);

    }
    .left{
        display: flex;
        .box{
            width: 60px;
            height: 60px;
            line-height: 60px;
            margin-left: 10px;
            padding-top: 10px;
            text-align: center;
        }
        .line-l{
            width: 40px;
            height: 20px;
            border-bottom: 2px solid #f00;
        }
        .rect-r{
            width: 40px;
            height: 40px;
            border: 2px solid #0f0;
        }
        .art-a{
            width: 40px;
            height: 40px;
            border-radius: 50%;
            border: 2px solid #00f; 
        }
        .font-a{
            width: 40px;
            height: 40px;
            line-height: 40px;
            color:#ff0;
            font-size: 30px;
            text-align: center;
        }
        .font-size{
            width: 80px;
            height: 60px;
            .el-input-number--small{
                width: 80px;
            }
        }
        
    }
    .right{
        margin-left: 450px;
        .el-button{
            color: #fff;
        }
    }
    .a-text{
        position: absolute;
        top: 0;
        left: 0;
        outline: none;
        min-height: 40px;
    }
    .xpc{
        position: absolute;
        top: 0;
        left: 0;
        border:1px solid #0f0;
        width: 80px;
        height: 80px;
        pointer-events: none;
    }
    
}
</style>
<style>
   .down-img{
       position: fixed;
       top:50px;
       left: 100px;
       border: 1px solid #f00;
       z-index: 999999;
       animation: down 1s 0.5s linear;
   }
   @keyframes down{
       0%{
           transform: scale(1) translate(0,0)
       }
       100%{
           transform: scale(0.7) translate(0,200px);
       }
   }
</style>